<template>
  <view>
    <view v-if="flag == 0">
      <view class="money">
        <view class="money">余额：<text style="color: red;">{{ userInfo.money/10 }}</text></view>
      </view>
      <view class="pay">
        <view></view>
        <button type="primary" @click="_pay">充值</button>
        <button type="feedBackList" @click="withdrawDeposit">提现</button>
      </view>
    </view>
    <view v-if="flag == 1">
      <view class="title">
        充值
      </view>
      <view class="msg">
        (请复制以下星号并添加到支付备注)
      </view>
      <view class="msg2" @tap="copyText">
        ***************
      </view>
      <view class=" image">
        <image style="height:350px" mode="heightFix"
          src="http://192.168.200.130:9100/aslife/sfz/2023/04/17/6d9c17e4-5f54-4b9a-a0c7-8c98a62dcc69.png"></image>
      </view>
      <view class="msg" style="margin-top: 3%;">
        PS：充值金额会在24小时之内到账
      </view>
      <button class="bt_back" @click="_toPay">充值</button>
      <button class="bt_back" @click="_toback">返回</button>
    </view>

    <view class="main" v-if="flag == 2">
      <view class="money">
        <view class="money">余额：<text style="color: red;">{{ userInfo.money/10 }}</text></view>
      </view>
      <view class="msg">
        (提现金额为0.5倍数)
      </view>
      <input class="input-phone" type="digit" v-model="getMoney" placeholder="请输入金额" />
      <input class="input-phone" type="text" v-model="phone" placeholder="请输微信手机号" />
      <button class="primary2" @click="onWithdrawDeposit2">全部提现</button>
      <button class="primary2" @click="onWithdrawDeposit">提现</button>
      <button class="primary2" @click="_toback">返回</button>
      <view class="msg" style="margin-top: 200px">
        PS：提现金额会在24小时之内到账
      </view>
    </view>
  </view>

</template>

<script>
  import {
    mapState,
    mapMutations,
  } from 'vuex'
  export default {
    name: "my-pay",
    computed: {
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
      ...mapState('m_user', ['userInfo', 'money']),
    },
    data() {
      return {
        flag: 0,
        getMoney: '',
        phone: '',
        moneyNew: '',
      };
    },
    onShow(){
      this.moneyNew = this.money;
      console.log(this.moneyNew)
    },
    methods: {
        ...mapMutations('m_user', ['saveMoney']),
      // 充值
      _toPay(){
        uni.$showMsg("请扫描图中二维码");
      },
      _toback() {
        this.flag = 0;
      },
      // 充值
      _pay() {
        this.flag = 1;
      },
      // 提现
      withdrawDeposit() {
        this.flag = 2;
      },
      // 提现
      async onWithdrawDeposit() {
        var money = this.getMoney;
        console.log(money)
        if (money == 0 || money * 10 % 5 != 0) {
          uni.$showMsg("金额输入不正确");
          return;
        };
        //11位手机号码正则
        var reg = /^1[3456789]\d{9}$/;
        console.log(reg.test(this.phone))
        if (!reg.test(this.phone)) {
          uni.$showMsg("请正确填写您的手机号码");
          return false;
        }

        const query = {
          money: money * 10,
          phone: this.phone,
        }
        // console.log(query)
        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/txmoney/withdraw/deposit', query);
        if (result.code != '200') return uni.$showMsg(result.msg);
        uni.$showMsg("提现成功");
        var temp = {
          money: this.money - query.money,
        }
        console.log(temp)
        this.saveMoney(temp)
      },
      onWithdrawDeposit2() {
        this.getMoney = this.userInfo.money;
      },
      // 复制
      copyText() {
        uni.setClipboardData({
          data: this.userInfo.userId,
          success: () => {
            uni.showToast({
              title: '复制成功'
            })
          }
        })
      },
      // 定义支付函数
      async pay(order) {
        try {
          // 调用后端API获取支付参数
          const res = await wepy.request({
            url: '/api/pay',
            method: 'POST',
            data: order,
          });

          // 调用微信支付API
          const result = await wepy.requestPayment({
            timeStamp: res.timeStamp,
            nonceStr: res.nonceStr,
            package: res.package,
            signType: res.signType,
            paySign: res.paySign,
          });

          // 支付成功
          return true;
        } catch (err) {
          // 支付失败
          console.error(err);
          return false;
        }
      },
    }
  }
</script>

<style lang="scss">
  .main {
    margin: 8%;
  }

  .title {
    font-size: 35rpx;
    font-weight: bold;
  }

  .msg {
    font-size: 25rpx;
    margin-top: 4%;
  }

  .input-phone {
    width: 100%;
    height: 100upx;
    border-bottom: 1px solid #ccc;
  }

  .pay {
    margin-top: 5%;
  }

  .bt_back {
    background-color: #00AA00;
    float: right;
    margin-top: 3%;
    margin-right: 20%;
    color: #fff;
    width: 200rpx;
    // padding: 10px 20px;
    font-size: 30rpx;
    border: none;
    border-radius: 5px;
  }

  button[type="primary"] {
    background-color: #00AA00;
    margin-left: 20%;
    float: left;
    color: #fff;
    width: 200rpx;
    // padding: 10px 20px;
    font-size: 30rpx;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button[type="feedBackList"] {
    background-color: #00AA00;
    float: right;
    margin-right: 20%;
    color: #fff;
    width: 200rpx;
    // padding: 10px 20px;
    font-size: 30rpx;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .primary2 {
    background-color: #00AA00;
    margin: 5%;
    float: left;
    color: #fff;
    width: 180rpx;
    // padding: 10px 20px;
    font-size: 30rpx;
    border: none;
    border-radius: 5px;
  }


  .money {
    color: black;
    font-weight: bold;
    font-size: 20px;
    margin-top: 8%;
    text-align: center;
  }

  .title {
    color: #00AA00;
    font-size: 50rpx;
    text-align: center;
  }

  .msg {
    font-size: 30rpx;
    text-align: center;
  }

  .msg2 {
    font-size: 35rpx;
    text-align: center;
    margin-bottom: 2%;
  }

  .image {
    margin-top: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>